<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShowDisaster</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <h1>事件信息</h1>
        <form class="layui-form" action="">

            <div class="layui-form-item">
                <label class="layui-form-label">事件名称</label>
                <div class="layui-input-block">
                    <input type="text" name="thingId" id="id" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-block">
                    <input type="text" name="thingName" id="thingName" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">发生时间</label>
                <div class="layui-input-block">
                    <input type="text" name="time" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">发生位置</label>
                <div class="layui-input-block">
                    <input type="text" name="area" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">灾情描述</label>
                <div class="layui-input-block">
                    <input type="text" name="describe" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">会商结果</label>
                <div class="layui-input-block">
                    <textarea name="result" placeholder="请输入会商后的内容" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">损失面积</label>
                <div class="layui-input-block">
                    <input type="text" name="size" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--            <div class="layui-form-item">-->
            <!--                <label class="layui-form-label">专家名称</label>-->
            <!--                <div class="layui-input-block">-->
            <!--                    <select name="expertName" id="expertName" lay-verify="required">-->
            <!--                        <option value=""></option>-->
            <!--                    </select>-->
            <!--                </div>-->
            <!--            </div>-->

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">与会人员</label>
                <div class="layui-btn-container" id="experts">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <textarea id="expertNames" name="expertName" placeholder="根据上方显示进行人员添加"
                              class="layui-textarea"></textarea>
                </div>
            </div>

            <label class="layui-form-label">会议时间</label>
            <input type="text" class="layui-input" id="date1" name="date" style="width: 100px">
        </form>

        <table id="demo" lay-filter="meetTable"></table>

    </div>
</div>


<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#date1',
            format: 'yyyy-MM-dd',
            type: 'datetime',
            position: 'fixed',
            trigger: 'click',
        });

    });
</script>


<script>
    let str = "";
    //Demo
    layui.use(['form', 'jquery', 'layer'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        form.render();
        let x = '<option value=""></option>';
        let y = "";
        $.ajax({
            type: "post"
            , url: "/Trees/expert?method=showAllExpert"
            , dataType: 'json'
            , success: function (data) {
                console.log(data)
                str = data;
                for (let i of data) {
                    // x+="<option value="+i.name+">"+i.name+"</option>"
                    y += "<button  type='button' id='" + i.pkId + "'  class='layui-btn myBtn' value='" + i.name + "'>" + i.name + "</button>"
                }
                // $('#expertName').html(x);
                $('#experts').html(y);
                console.log(y)
                let names = ""
                $('.myBtn').on('click', function () {
                    //获得按钮的值，赋给文本域
                    names += $(this).attr("value");
                    $('#expertNames').val(names);
                    name += ","
                })

                form.render('select');
            }
        })

        layui.use('table', function () {
            let $ = layui.$;
            let layer = layui.layer;
            let table = layui.table;
            let id = $('#id').val();
            let name = $('#thingName').val();
            console.log(id)
            console.log(name)

            let strs = '/Trees/meeting?method=showOneMeet' + '&id=' + id
            //第一个实例
            let show = table.render({
                elem: '#demo'
                , url: strs //数据接口
                , page: false //开启分页
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "count": res.total, //解析数据长度
                        "data": res.list
                    };
                }
                , cols: [[ //表头
                    {field: 'date', title: '日期'}
                    , {field: 'result', title: '专家建议'}
                    , {field: 'people', title: '与会人员'}
                ]]
            })
            // if(id===""){
            //     console.log("因为没有获取到值而重新加载")
            //     show.reload();
            // }
            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    })
</script>
</body>
</html>
